<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <h2>msg == {{msg}}</h2>
      <m-head></m-head>
      <parent id="2116" :msg="msg"></parent>
    </div>
    <template id="parent">
      <div>
        <h2>Parent - Parent - Parent</h2>
        <h2>id -- {{id}}</h2>
        <h4>msg --{{msg}}</h4>
        <hr />
        <childone
          count="1314"
          :word="word"
          :city="city"
          :address="address"
          :area="area"
        >
        </childone>
        <hr />
        <childtwo prop-a="2116-看电影" prop-b="pb" :prop-c="pc" :prop-d="pd">
        </childtwo>
      </div>
    </template>
    <template id="childone">
      <div>
        <h2>childone - childone - 组件1</h2>
        <h2>word --{{word}}</h2>
        <h2>city -- {{city}}</h2>
        <h2>area -- {{area}}</h2>
        <h2>address -- {{address}}</h2>
      </div>
    </template>
    <template id="childtwo">
      <div>
        <h2>childtwo - childtwo - 组件2</h2>
        <h2>props -- {{propA}} --{{propB}} --{{propC}} --{{propD}}</h2>
      </div>
    </template>
    <script>
      Vue.component("mHead", {
        template: "<header> Head - Head - wh2116 daydayup</header>",
      });
      Vue.component("parent", {
        template: "#parent",
        props: ["id", "msg"], //接受父组件的props
        data() {
          return {
            word: "Are you OK",
            city: " 武汉市",
            area: " ",
            address: "金融港B18栋3楼",
            pc: "三阶段的技巧就是多写代码 ",
            pd: 2116520,
          };
        },
        components: {
          childone: {
            template: "#childone",
            props: {
              word: String,
              city: [String, Number],
              area: {
                type: String,
                default: "北京市朝阳区",
                required: true, //必传
              },
              address: {
                type: [Number, String],
                default() {
                  return "千锋北京教育";
                },
              },
            },
          },
        },
      });
      Vue.component("childtwo", {
        template: "#childtwo",
        props: {
          propA: [String, Number],
          propB: {
            type: String,
          },
          propC: {
            type: String,
          },
          propD: {
            type: Number,
            default: 1314,
          },
        },
      });

      const vm = new Vue({
        //el:"#app",
        components: {},
        data: {
          title: "Vue 组件初步 (组件通信 - props )",
          msg: "小型、独立和通常可复用的组件构建大型应用",
        },
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
        },
      }).$mount("#app");
    </script>
  </body>
</html>
